<template>
  <view class="page-container order">
    <view class="order-top">
      <up-subsection
        :list="subSection"
        :current="current"
        active-color="#2979ff"
        bg-color="#f5f5f5"
        height="80"
      ></up-subsection>
    </view>

    <view class="order-list" style="flex: 1; height: 0">
      <scroll-view
        scroll-y
        refresher-enabled
        :refresher-triggered="refreshing"
        @refresherrefresh="onRefresh"
        @scrolltolower="loadMore"
        style="height: 100%"
      >
        <view
          class="order-item"
          v-for="(item, index) in orderList"
          :key="index"
          @click="viewOrderDetail(item)"
        >
          <view class="item-header">
            <text class="order-no">订单编号：{{ item.orderNo }}</text>
            <view class="status-badge" :class="item.status">
              {{ item.statusText }}
            </view>
          </view>

          <view class="item-content" @click="viewOrderDetail(item)">
            <image
              class="visa-img"
              :src="item.visaImg"
              mode="aspectFill"
            ></image>
            <view class="info">
              <text class="title">{{ item.visaName }}</text>
              <view class="meta">
                <text class="country">{{ item.country }}</text>
                <text class="date">{{ item.applyDate }}</text>
              </view>
              <view class="price-wrap">
                <text class="price-label">金额：</text>
                <text class="price">¥{{ item.price }}</text>
              </view>
            </view>
          </view>

          <view class="item-footer">
            <up-button
              size="small"
              plain
              hairline
              custom-style="margin-right: 20rpx"
              v-if="item.status === 'processing'"
              @click="cancelOrder(item)"
            >
              取消订单
            </up-button>
            <up-button
              size="small"
              type="primary"
              v-if="item.status === 'processing'"
              @click="viewProgress(item)"
            >
              查看进度
            </up-button>
            <up-button
              size="small"
              plain
              hairline
              type="warning"
              v-if="item.status === 'completed'"
              @click="reapply(item)"
            >
              再次申请
            </up-button>
          </view>
        </view>

        <up-loadmore
          :status="loadStatus"
          :line="false"
          :icon-type="loadStatus === 'loading' ? 'circle' : 'none'"
        />
      </scroll-view>
    </view>

    <up-empty
      mode="order"
      text="暂无订单~"
      margin-top="100"
      icon="/static/images/empty-order.png"
      v-if="orderList.length === 0"
    ></up-empty>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
let current = ref(0);
let subSection = ref(["全部", "进行中", "已完成", "已取消"]);

const refreshing = ref(false);

const orderList = ref([
  {
    orderNo: "V20240515001",
    visaName: "美国旅游签证(B1/B2)",
    country: "美国",
    visaImg: "/static/images/visa-usa.jpg",
    applyDate: "2024-05-15",
    price: "1288",
    status: "processing",
    statusText: "处理中",
  },
  {
    orderNo: "V20240510002",
    visaName: "日本单次旅游签证",
    country: "日本",
    visaImg: "/static/images/visa-japan.jpg",
    applyDate: "2024-05-10",
    price: "599",
    status: "completed",
    statusText: "已完成",
  },
  {
    orderNo: "V20240510002",
    visaName: "日本单次旅游签证",
    country: "日本",
    visaImg: "/static/images/visa-japan.jpg",
    applyDate: "2024-05-10",
    price: "599",
    status: "completed",
    statusText: "已完成",
  },
  {
    orderNo: "V20240510002",
    visaName: "日本单次旅游签证",
    country: "日本",
    visaImg: "/static/images/visa-japan.jpg",
    applyDate: "2024-05-10",
    price: "599",
    status: "completed",
    statusText: "已完成",
  },
  {
    orderNo: "V20240510002",
    visaName: "日本单次旅游签证",
    country: "日本",
    visaImg: "/static/images/visa-japan.jpg",
    applyDate: "2024-05-10",
    price: "599",
    status: "completed",
    statusText: "已完成",
  },
  {
    orderNo: "V20240510002",
    visaName: "日本单次旅游签证",
    country: "日本",
    visaImg: "/static/images/visa-japan.jpg",
    applyDate: "2024-05-10",
    price: "599",
    status: "completed",
    statusText: "已完成",
  },
]);

const loadStatus = ref<"nomore" | "loading" | "loadmore" | undefined>("nomore");

// 模拟分页加载
function loadMore() {
  loadStatus.value = "loading";
  setTimeout(() => {
    // 这里模拟加载更多数据
    loadStatus.value = "nomore"; // 实际项目中根据是否有更多数据来设置
  }, 1000);
}

function onRefresh() {
  refreshing.value = true;
  setTimeout(() => {
    refreshing.value = false;
  }, 1000);
}

function viewOrderDetail(item: any) {
  uni.navigateTo({
    url: `/pages/order/detail?id=${item.id}`,
  });
  console.log("查看订单详情", item);
}

function cancelOrder(item: any) {
  console.log("取消订单", item);
}

function viewProgress(item: any) {
  console.log("查看进度", item);
}

function reapply(item: any) {
  console.log("再次申请", item);
}
</script>

<style lang="scss" scoped>
@mixin text-ellipsis($lines: 1) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: -webkit-box;
  -webkit-line-clamp: $lines;
  -webkit-box-orient: vertical;
}
.order {
  background-color: #f5f5f5;

  .order-top {
    background-color: #fff;
    padding: 20rpx;
    position: sticky;
    top: 0;
    z-index: 10;
    box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  }

  .order-list {
    .order-item {
      background: #fff;
      border-radius: 16rpx;
      padding: 24rpx;
      margin: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);

      .item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #f5f5f5;

        .order-no {
          font-size: 26rpx;
          color: #666;
        }

        .status-badge {
          font-size: 24rpx;
          padding: 6rpx 16rpx;
          border-radius: 24rpx;

          &.processing {
            color: #ff9900;
            background-color: #fff8e6;
          }

          &.completed {
            color: #19be6b;
            background-color: #e6f7ee;
          }
        }
      }

      .item-content {
        display: flex;
        padding: 24rpx 0;

        .visa-img {
          width: 160rpx;
          height: 120rpx;
          border-radius: 8rpx;
          flex-shrink: 0;
        }

        .info {
          flex: 1;
          padding-left: 24rpx;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            @include text-ellipsis(2);
          }

          .meta {
            display: flex;
            align-items: center;
            margin: 10rpx 0;

            .country {
              font-size: 24rpx;
              color: #666;
              margin-right: 20rpx;
              padding: 4rpx 12rpx;
              background-color: #f5f5f5;
              border-radius: 4rpx;
            }

            .date {
              font-size: 24rpx;
              color: #999;
            }
          }

          .price-wrap {
            display: flex;
            align-items: center;

            .price-label {
              font-size: 24rpx;
              color: #999;
            }

            .price {
              font-size: 28rpx;
              color: #f44;
              font-weight: bold;
            }
          }
        }
      }

      .item-footer {
        display: flex;
        justify-content: flex-end;
        padding-top: 20rpx;
        border-top: 1rpx solid #f5f5f5;
      }
    }
  }
}
</style>
